<template>
	<view>
		<back :showBackText="false" customClass="bg-gradual-blue text-white" title="编辑资料"></back>
		<view v-if="isLoad" class="content-wrapper">
			<!-- 头像选择区域 -->
			<view class="avatar-section">
				<button class="avatar-button" @tap="randomAvatarTap">
					<view class="cu-avatar round xl" :style="'background-image:url('+avatarInputVal+');'">
					</view>
					<view class="avatar-hint">随机换头像</view>
				</button>
			</view>
			
			<!-- 表单区域 -->
			<view class="form-section">
				<view class="cu-form-group radius shadow-warp">
					<view class="title"><text class="cuIcon-my text-blue margin-right-xs"></text>昵称</view>
					<input @input="nicknameInputTap" type="nickname" maxlength="20" placeholder="填入要修改的昵称"
						:value="nicknameInputVal" />
				</view>
				<view class="cu-form-group radius shadow-warp">
					<view class="title"><text class="cuIcon-mobile text-blue margin-right-xs"></text>手机</view>
					<input v-if="user.mobile" disabled :value="user.mobile" />
					<button v-else open-type="getPhoneNumber" @getphonenumber="wxPhoneBindTap" class="cu-btn bg-blue sm radius">
						绑定手机号
					</button>
				</view>
			</view>
			
			<!-- 按钮区域 -->
			<view class="button-section">
				<button @tap="submitTap" class="cu-btn bg-gradual-blue lg radius shadow-blur">保存资料</button>
				<button @tap="cancelTap" class="cu-btn bg-grey lg radius shadow-blur">取消修改</button>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import {
		post
	} from "@/common/js/http.js";
	import { isSet } from "@/common/js/util.js";
	let app = getApp();
	let that = null;
	export default {
		data() {
			return {
				isLoad: false,
				user: {},
				avatarInputVal: '',
				nicknameInputVal: '',
			};
		},
		onLoad(options) {
			that = this;
			let userInfo = app.globalData.config.storage.getUserInfoData();
			that.user = userInfo;
			that.isLoad = true;
			that.avatarInputVal = userInfo.avatar;
			that.nicknameInputVal = userInfo.nickname;
		},
		methods: {
			async randomAvatarTap() {
				uni.showLoading({
					title: '获取随机头像中...'
				});
				
				try {
					// 调用随机头像API
					let res = await post('user/randAvatar', {});
					if (res.code == 1) {
						let avatar = res.data.uri;
						
						// 更新用户头像
						await app.globalData.service.updateUser({
							avatar: avatar
						});
						
						// 更新本地数据
						that.user.avatar = avatar;
						that.avatarInputVal = avatar;
						app.globalData.config.storage.setUserInfoData(that.user);
						
						uni.hideLoading();
						uni.showToast({
							title: '头像更换成功',
							icon: 'success'
						});
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.message || '获取随机头像失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取随机头像失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: '获取随机头像失败',
						icon: 'none'
					});
				}
			},
			nicknameInputTap(options) {
				that.nicknameInputVal = options.detail.value;
			},
			// 微信手机号快捷绑定
			wxPhoneBindTap(options) {
				if (!isSet(options.detail.code)) {
					return;
				}
				uni.login({
					success(res) {
						let data = {
							code: res.code,
							wx_phone_code: options.detail.code
						};
						post('user/bindWxMobile', data)
							.then((t) => {
								if (t.code == 1) {
									console.log(t);
									that.user.mobile = t.data.mobile;
									app.globalData.config.storage.setUserInfoData(that.user);
								} else {
									app.showToast(t.message);
								}
							})
							.catch((t) => {
								app.showToast('微信手机号绑定异常');
							});
					}
				});
			},
			async submitTap(options) {
				let res = await app.globalData.service.updateUser({
					nickname: that.nicknameInputVal
				});
				that.user.nickname = that.nicknameInputVal;
				app.globalData.config.storage.setUserInfoData(that.user);
				uni.showToast({
					title: res.message,
					mask: true,
					complete: function() {
						setTimeout(function() {
							uni.navigateBack();
						}, 500);
					}
				});
			},
			cancelTap() {
				uni.navigateBack();
			}
		}
	};
</script>
<style>
	button:after {
		border: none;
	}
	
	.content-wrapper {
		padding: 30rpx;
	}
	
	.avatar-section {
		display: flex;
		justify-content: center;
		padding: 40rpx 0;
		background: linear-gradient(45deg, #0081ff, #1cbbb4);
		border-radius: 0 0 50rpx 50rpx;
		margin-bottom: 40rpx;
	}
	
	.avatar-button {
		background: transparent;
		padding: 0;
		width: auto;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.cu-avatar.xl {
		width: 160rpx;
		height: 160rpx;
		border: 6rpx solid rgba(255, 255, 255, 0.7);
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.avatar-hint {
		color: #ffffff;
		font-size: 24rpx;
		margin-top: 20rpx;
		opacity: 0.9;
	}
	
	.form-section {
		margin: 30rpx 0 60rpx;
	}
	
	.cu-form-group {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 30rpx;
		border-radius: 12rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}
	
	.cu-form-group .title {
		font-weight: bold;
	}
	
	.button-section {
		padding: 20rpx 0 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 30rpx;
	}
	
	.cu-btn {
		margin-bottom: 0;
		height: 90rpx;
		font-size: 32rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		line-height: 90rpx;
		min-width: 220rpx;
		box-sizing: border-box;
	}
	
	.cu-btn.bg-gradual-blue,
	.cu-btn.bg-grey {
		box-shadow: 0 10rpx 20rpx rgba(0, 129, 255, 0.2);
	}
</style>